<template>
  <div class="music-Box">
      <audio :src="music" ref="audio"></audio>
    <div class="image" @click="playerMusic" @mouseenter="showend = play;showstart = !play"
        @mouseleave="showend = false;showstart = false">
      <img
        src="https://www.ttzxh.icu/api/upload/showImg?avatar=public/images/b23f90d67a1e311c43161b998df9f980pizhikk.jpg&username=2628735401"
        alt="歌曲图片"
        width="50px"
        height="50px"
        
      />
      <i class="iconfont iconzanting" v-if="showend"></i>
      <i class="iconfont iconbofang" v-if="showstart"></i>
    </div>
    <div class="music-menu"></div>
    <div class="music-option">
      <div class="option-top">
        <div class="left"><i class="iconfont iconshangyishou"></i></div>
        <div class="center">
          <div class="name">test哥</div>
          <div class="time">12:12</div>
        </div>
        <div class="right"><i class="iconfont iconxiayishou"></i></div>
      </div>
      <div class="option-bottom">
        <div>
          <music-progress progress='40%'></music-progress>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import musicProgress from "./musuc-progress.vue";
import {ref} from "vue"
          const audio = ref<HTMLAudioElement|null>(null)
          const play = ref<boolean>(false)
          const showstart = ref<boolean>(false)
          const showend = ref<boolean>(false)
          const music = ref<string>("http://localhost:3001/api/upload/music?music=public/music/61b7dbb3ab8dcddeed70161e11de848f.mp3")
    const playerMusic = () =>{
      play.value = !play.value
      play.value?audio.value?.play():
      audio.value?.pause()
      showend.value = play.value;showstart.value = !play.value
    }
</script>

<style lang="scss" scoped>
.music-Box {
  position: relative;
  width: 250px;
  height: 70px;
  background-color: #ffffff99;
  border-radius: 10px;
  box-shadow: 0 0 25px 0px rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  box-sizing: border-box;
  z-index: 99;
  .music-menu {
    width: 250px;
    height: 0px;
    background-color: rgba(255, 255, 255, 0.7);
    position: absolute;
    left: 0;
    bottom: 60px;
    z-index: -1;
    transition: all 0.2s;
    &:hover{
        height: 500px;
    }
  }
}
.image {
    position: relative;
  &:hover + .music-menu {
    height: 500px;
  }
  img {
    border-radius: 50%;
  }
  i{
      position: absolute;
      font-size: 28px;
      color: rgba(55, 55, 55, 0.6);
      left: 50%;
      top: 50%;
      margin: auto;
      transform: translate(-14px,-17px);
    
  }
}
.music-option .option-top {
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 5px;
  i {
    font-size: 25px;
    color: rgba(3, 3, 3, 0.4);
    transition: color 0.15s;
    &:hover{
        color: #5c82df99;
    }
  }
}
.music-option .option-top div {
  margin: 0px 8px;
  text-align: center;
}
.music-option .option-top .name {
  font-size: 17px;
  font-weight: 500;
  color: rgba(3, 3, 3, 0.8);
}
.music-option .option-top .time {
  font-size: 12px;
  color: rgba(55, 55, 55, 0.4);
  font-weight: bolder;
}
.music-option .option-bottom div {
  text-align: center;
}
.option-bottom div {
  margin-left: 4px;
}
</style>